import Stateful from '@/layout/widgets/stateful';
import SummaryCommentsMixin from './src/mixins/summary-comments-mixin';
import OpinionArea from './src/opinion-area/index.vue';
import MessageEdit from './src/message-edit/index.vue';
import ProcessTitle from '@/components/process-title';
import './src/css/index.scss';
import { useBaseInfoStore } from '@/store/modules/base-info';
import Scroll from 'xdesign/base-ui/antdv/pretty-scroll/renderer';
import api from '@/api';

// 边栏
// summary: 适配新建/处理/查看页
export default {
  name: 'approvalOpinions',
  mixins: [Stateful, SummaryCommentsMixin],
  render() {
    return (
      <div class="approval-opinions-panle" onClick={this.cancelEdit}>
        <ProcessTitle icon="vp-shenpiyijian" name={this.$i18n('collaboration.summary.comment')}>
          <div class="comment-header-search">
            <a-input
              v-show={this.openHeaderSearch}
              ref="userNameInput"
              style="width:160px"
              v-model={this.searchByKey}
              onBlur={this.handleUserNameInput}
              placeholder={this.$i18n('serial.search.key.placeholder')}>
              <icon-font slot="prefix" type="cap-icon-search-large" />
              {this.isShowDelete && (
                <icon-font
                  slot="suffix"
                  type="sy-delete-x"
                  style={{ color: '#00000040', cursor: 'pointer' }}
                  onClick={this.handleDeleteSearch}
                />
              )}
            </a-input>
            <icon-font
              v-show={!this.openHeaderSearch}
              onClick={this.toggleHeaderSearchHandel}
              type="cap-icon-search-large"
            />
          </div>
        </ProcessTitle>

        <Scroll>
          {this.baseInfo ? (
            <OpinionArea
              ref={`opinionArea-${this.tabs.key}`}
              list={this.tabs.list}
              isLoading={this.tabs.isLoading}
              isEnd={this.tabs.isEnd}
              v-bind={this.tabs}
              replyItem={this.replyItem}
              onReply={this.onReplyHandel}
              onAddNextPage={this.addNextPageList}
              commentForwardMap={this.commentForwardMap}
              allCommentCountMap={this.allCommentCountMap}
              forwardPraiseCountMap={this.forwardPraiseCountMap}
              hideEmptyContent={this.hideEmptyContent}
              isVisible={this.isVisible}
              relatedAndPraise={this.relatedAndPraise}
              forwardPageInfo={this.forwardPageInfo}
              onTabChange={this.tabChange}
              onChakanHandel={this.chakanHandel}
            />
          ) : null}
        </Scroll>

        {
          <a-drawer
            visible={!!this.replyItem}
            destroyOnClose={true}
            placement="bottom"
            height="auto"
            wrapStyle={{ position: 'absolute' }}
            bodyStyle={{ padding: 0 }}
            mask={false}
            getContainer={() => this.$el}
            keyboard={false}
            afterVisibleChange={(visible) => {
              if (visible) this.$el.querySelector('textArea').focus();
            }}
            closable={false}>
            {this.replyItem ? (
              <MessageEdit
                item={this.replyItem}
                rootId={this.replyRootId}
                activeKey={this.activeKey}
                onCancel={this.cancelEdit}
                onAddPostscript={this.onAddPostscript}
                onAddReply={this.onAddReply}></MessageEdit>
            ) : null}
          </a-drawer>
        }
      </div>
    );
  },
  data() {
    return {
      activeKey: 1,
      replyItem: null,
      replyRootId: null,
      openHeaderSearch: false,
      tabs: {
        key: 1,
        isLoading: false,
        isEnd: false,
        page: { page: 1, pageSize: 20 },
        list: []
      },
      searchTimer: null,
      isVisible: false, // 是否打开抽屉
      commentForwardMap: [],
      allCommentCountMap: {},
      forwardPraiseCountMap: {},
      relatedAndPraise: {},
      forwardPageInfo: {
        page: 1,
        pageSize: 20,
        forWardIsLoading: false,
        forWardIsEnd: false
      }
    };
  },
  props: {
    showHeader: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isShowDelete() {
      return !!this.searchByKey;
    }
  },
  mounted() {
  
  },
  watch: {
    searchByKey() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
      this.searchTimer = setTimeout(() => {
        this.updateList();
      }, 200);
    }
  },
  methods: {
    chakanHandel() {
      this.hideEmptyContent = this.hideEmptyContent === '0' ? '1' : '0';
      this.updateList();
    },
    handleSearchEnterHandel() {
      this.updateList();
    },
    handleUserNameInput() {
      if (!this.searchByKey) {
        this.openHeaderSearch = false;
      }
    },
    toggleHeaderSearchHandel() {
      this.openHeaderSearch = !this.openHeaderSearch;
      if (this.openHeaderSearch) {
        this.$nextTick(() => this.$refs.userNameInput.focus());
      }
    },
    cancelEdit() {
      this.replyItem = null;
      this.isVisible = false;
      if (this.catchSubmitComment) {
        this.catchSubmitComment.isNew = false;
        this.catchSubmitComment = null;
      }
    },
    onReplyHandel(item, rootId) {
      console.log('onReplyHandel:', item, rootId);
      //先置空，避免点击其他的继续显示当前的
      if (this.catchSubmitComment) {
        this.catchSubmitComment.isNew = false;
      }

      this.replyItem = null;
      this.$nextTick(() => {
        this.replyItem = item;
        this.isVisible = true;
      });
      this.replyRootId = rootId;
    },
    tabChange(activeKey) {
      this.activeKey = activeKey;
      this.replyItem = null;
      this.isVisible = false;
      // this.openHeaderSearch = false;
      this.updateList();
    },

    onAddPostscript() {
      // this.$refs.sponsorPostscript.refresh();
    },
    async onAddReply(submitComment) {
      // 数据处理
      // 点赞为0
      submitComment.praiseNumber = 0;
      submitComment.isNew = true;
      this.tabs.list.find((el) => el.id == this.replyRootId).children.push(submitComment);
      console.log('this.$refs:', this.$refs);
      if (this.catchSubmitComment) {
        this.catchSubmitComment.isNew = false;
      }
      //头像取当前用户的
      const {
        currentUser: { avatarImageUrl }
      } = this.baseInfo.businessData;
      submitComment.avatarImageUrl = avatarImageUrl || '';
      this.catchSubmitComment = submitComment;
      this.$nextTick(() => {
        // 滚动到评论
        this.$refs[`opinionArea-${this.activeKey}`].scrollToComment(submitComment);
        this.replyItem = null;
        this.isVisible = false;
      });
    },
    handleDeleteSearch() {
      // 先清空搜索
      this.searchByKey = '';

      this.$nextTick(() => this.$refs.userNameInput.focus());
    },
    //获取推送人员数据
    async getPushedPeopleList() {
      const {
        affair: { objectId }
      } = this.baseInfo.businessData;
      console.log(objectId);
      // useBaseInfoStore().updatePushPeopleList(await api.commentGetAtList(objectId));
    }
  }
};
